<link rel="stylesheet" href="{{base_url()}}syslib/jqwidgets/styles/jqx.base.css" type="text/css" />
<script type="text/javascript" src="{{base_url()}}syslib/jqwidgets/jqxcore.js"></script>
<script type="text/javascript" src="{{base_url()}}syslib/jqwidgets/jqxscrollbar.js"></script>
<script type="text/javascript" src="{{base_url()}}syslib/jqwidgets/jqxbuttons.js"></script>
<script type="text/javascript" src="{{base_url()}}syslib/jqwidgets/jqxmenu.js"></script>
<script type="text/javascript" src="{{base_url()}}syslib/jqwidgets/jqxgrid.js"></script>
<script type="text/javascript" src="{{base_url()}}syslib/jqwidgets/jqxgrid.selection.js"></script>	
<script type="text/javascript" src="{{base_url()}}syslib/jqwidgets/jqxdata.js"></script>
<script type="text/javascript" src="{{base_url()}}syslib/jqwidgets/jqxdata.export.js"></script> 
<script type="text/javascript" src="{{base_url()}}syslib/jqwidgets/jqxgrid.export.js"></script>
<script type="text/javascript" src="{{base_url()}}syslib/jqwidgets/gettheme.js"></script>
<script type="text/javascript" src="{{base_url()}}syslib/jqwidgets/jqxgrid.sort.js"></script>
<script type="text/javascript" src="{{base_url()}}syslib/jqwidgets/globalization/jquery.global.js"></script>

{{$colModel=$Data["colModel"]}}
{{foreach $colModel as $col}}
    {{if $col|is_array}}
        {{$column["text"]=$col["text"]}}
        {{$column["datafield"]=$col["datafield"]}}
        {{if isset($col["cellsalign"])}}
            {{$column["cellsalign"]=$col["cellsalign"]}}
        {{/if}}
        {{if isset($col["columntype"])}}
            {{$column["columntype"]=$col["columntype"]}}
        {{/if}}
        {{if isset($col["cellsformat"])}}
            {{$column["cellsformat"]=$col["cellsformat"]}}
        {{/if}}
        {{if isset($col["width"])}}
            {{$column["minwidth"]=$col["width"]}}
        {{else}}
            {{$column["minwidth"]=100}}
        {{/if}}
        {{$columns[$col["datafield"]]=$column}}
        {{$column=[]}}
        {{$datafield["name"]=$col["datafield"]}}
        {{if isset($col["type"])}}
            {{$datafield["type"]=$col["type"]}}
        {{else}}
            {{$datafield["type"]="string"}}
        {{/if}}
    {{else}}
        {{$column["text"]=$col}}
        {{$column["datafield"]=$col}}
        {{$datafield["type"]="string"}}
        {{$columns[$col]=$column}}
        {{$column=[]}}
    {{/if}}
    {{$datafields[]=$datafield}}
    {{$datafield=[]}}
{{/foreach}}
{{include file="../report/handleEvent.tpl"}}
<div class="pr2 frmjqxgrid">
    <div id="jqxGrid"></div>
</div>
<script type="text/javascript">
    var myjqxGrid= (function () {
        var myGrid=$("#jqxGrid");
        var theme=getTheme();
        var source ={
            datatype: "json",
            type        :   "POST",
            datafields  : {{json_encode($datafields)}},
            url         : '{{base_url()}}APanel/report/jqgrid_data/',
            filter      : function(){ 
            },
            sort        : function(){ 
                myGrid.jqxGrid('updatebounddata') 
            },
            root        : 'Rows',
            beforeprocessing: function(data){		
                    source.totalrecords = data[0].TotalRows;					
            }
        };	
        var dataadapter = new $.jqx.dataAdapter(source, {
            loadError: function(xhr, status, error){
                tipMessage("<b>Status</b>:"+xhr.status+"<br/><b>ThrownError</b>:"+error+"<br/>");
            }
        });
        var columns={{json_encode($columns)}};
        //columns=jqxFixColumns(columns);
        //Adding event listeners
        function _addEventListeners() {
            
        };
        //Creating all page elements which are jqxWidgets
        function _createElements() {

        };
        //Creating the demo window
        function _createWindow() {
            
        };
        function _createGrid(){
            try{
            var gridconfig={
                width:'100%',
                height:'500',
                //autoheight: true,
                //rowsheight: 24,
                source: dataadapter,
                theme: theme,
                sortable: true,
                ready: function () {
                    
                },
                rendergridrows: function(obj)
                {
                    return obj.data;    
                },
                columns: columns
            };
            myGrid.jqxGrid(gridconfig);
            handleEvent_jqxGrid(myGrid);
            }catch(e){ tipMessage(e.message); }
        }
        return {
            Init:function(){
                _createGrid();
            }
        }
    } ());
    
    $(document).ready(function () {
        myjqxGrid.Init();
    });
</script>
<style>
    #jqxGrid,#jqxGrid *{
        -moz-border-radius: 0px !important;
        -webkit-border-radius: 0px !important;
        border-radius: 0px !important;
        font-family: tahoma;
        font-size: 11px;
    }
    .jqx-widget-content,.jqx-calendar-footer{
        font-family: tahoma;font-size: 11px;line-height: 16px
    }
</style>
<div class="jfk-bubble jfk-bubble-promo grayc jqxwidget hidden" 
        style="left: 200px;top: 36px; opacity: 1; position: fixed">
    <div class="jfk-bubble-closebtn giftnotice btn" onclick="$('.jqxwidget').hide('500');" style=""></div>
    <div class="jfk-bubble-content-id">
        <div class="promo-content" style="">
            <a href="http://www.jqwidgets.com" target="_blank">
                <img style="background: #000" src="http://www.jqwidgets.com/wp-admin/images/logo_bw.png"/>
            </a>
            <p>
                Website có sử dụng bộ control jqxWidget.
            </p>
        </div>
    </div>
    <div class="jfk-bubble-arrow-id jfk-bubble-arrow jfk-bubble-arrowdown" style="left: 132px">
        <div class="jfk-bubble-arrowimplbefore"></div>
        <div class="jfk-bubble-arrowimplafter"></div>
    </div>
</div>